<template>
<div class='container'>
    <label @click="increase">+</label>
    <input type="text" v-model="refNum">
    <label @click="decrease">-</label>
</div>
</template>

<script>
import { ref } from "@vue/reactivity"
export default {
   props:{
      num:{
         type: Number,
         require: true
      }
   },
   emits:[
      "onNumChange",
   ],
   setup(props, context) {
      const refNum = ref(props.num)
      const increase = ()=>{
         refNum.value++
         context.emit('onNumChange', refNum.value)
      }
      const decrease = ()=>{
         if(refNum.value > 0){
            refNum.value--
         }
         context.emit('onNumChange', refNum.value)
      }
      return {
        increase,
        decrease,
        refNum
      };
   },
}
</script>
<style  scoped>
.container{
   display: flex;
   border: 1px solid #dcdcdc
}
.container label{
   width: 40px;
   text-align: center;
}
.container input{
   width: 30px;
   border: none;
   outline: none;
}
</style>